import React, { useState, useEffect } from 'react'
import { getRightList } from '@/services/index'
import useStore from '@/context/useStore'
import { IRightList } from '@/utils/myProject'
import { observer } from "mobx-react-lite"
import styles from './myProject.less'
import classNames from 'classnames'

const MyProject: React.FC = () => {
  let { myProject } = useStore()
  // 右侧列表
  useEffect(() => {
    myProject.getRightList()

  }, [])
  console.log(myProject.rightList)
  return <div>
    <div className={styles.my_project}>
      <div className={styles.project_middle_}>
        <div className={styles.middle_}></div>
        <div className={styles.project_detail}>
          <div className={styles.project_left}>
            <div className={styles.project_nav}>
              <div className={styles.el_tabs}>
                <div className={styles.el_tabs__header}>
                  <div className={styles.el_tabs__nav_wrap}>
                    <div className={styles.el_tabs__nav_scroll}>
                      <div role="tablist" className={styles.el_tabs__nav} style={{ transform: 'translateX(0px)' }}>
                        <div className={styles.el_tabs__active_bar} style={{ width: '72px', transform: 'translateX(0px)' }}></div>
                        <div id="tab-first" aria-controls="pane-first" role="tab" aria-selected="true" className={styles.el_tabs__item}>小组项目</div>
                        <div id="tab-third" aria-controls="pane-third" role="tab" className={styles.el_tabs__item}>收藏项目</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={styles.el_tabs__content}>
                  <div role="tabpanel" id="pane-first" aria-labelledby="tab-first" className={styles.el_tab_pane}>
                    <div className={styles.plan_inner}>
                      <div className={styles.plan_top}>
                        <div className={styles.plan_type}>
                          <div role="radiogroup" className={styles.el_radio_group}>
                            <label role="radio" className={styles.el_radio_button}>
                              <input type="radio" className={styles.el_radio_button__orig_radio} value="0" />
                              <span className={styles.el_radio_button__inner}>未开始
                                {/* <!----> */}
                              </span>
                            </label>
                            <label role="radio" className={styles.el_radio_button}>
                              <input type="radio" className={styles.el_radio_button__orig_radio} value="1" />
                              <span className={styles.el_radio_button__inner}>进行中
                                {/* <!----> */}
                              </span>
                            </label>
                            <label role="radio" className={styles.el_radio_button}>
                              <input type="radio" className={styles.el_radio_button__orig_radio} value="2" />
                              {/* <span className={styles.el - radio - button__inner}>已结束<!----></span> */}
                            </label>
                          </div>
                        </div>
                        <div className={styles.status_done}>
                          <div className={styles.right_status}>
                            <div className={styles.status_complete}></div>
                            <div className={styles.status_text}>完成</div>
                            <div className={styles.status_doing}></div>
                            <div className={styles.status_text}>进行中</div>
                            <div className={styles.status_nosend}></div>
                            <div className={styles.status_text}>未进行</div>
                          </div>
                        </div>
                      </div>
                      <div className={styles.status_text}>
                        <div className={styles.el_loading_mask} style={{ display: 'none' }}>
                          <div className={styles.el_loading_spinner}>
                            <svg viewBox="25 25 50 50" className={styles.circular} />
                            <circle cx="50" cy="50" r="20" fill="none" className={styles.path}></circle>
                            {/* </svg><!----> */}
                          </div>
                        </div>
                        <div className={styles.plan_inner_in}>
                          <div className={styles.plan_info}>
                            <div className={styles.plan_info_top}>
                              <div className={styles.plan_name}>演示计划</div>
                              <div className={styles.plan_info_top_right}> 网站2021A班  </div>
                            </div>
                            <div className={styles.plan_detail_info}>
                              <span >项目 1 个</span>
                              <span >|</span>
                              <span >时长 48 天</span>
                            </div>
                            <div className={styles.plan_time}>
                              <span style={{ marginRight: '10px' }}>2021-05-14 00:00:00</span>
                              <span >~</span>
                              <span style={{ marginLeft: '10px' }}>2021-06-30 00:00:00</span>
                            </div>
                          </div>
                          {/* <div className={styles.group_progres}><!----> */}
                          {/* <div className={styles.percent_progress2}> 完成 16 %</div><!----> */}
                          <div role="progressbar" className={styles.el_progress}>
                            <div className={styles.el_progress_bar}>
                              <div className={styles.el_progress_bar__outer} style={{ height: '6px' }}>
                                {/* <div className={styles.el_progress_bar__inner} style={{ width: '16%', backgroundColor: 'rgb(255, 168, 65)' }}><!----></div> */}
                              </div>
                              {/* </div><!----> */}
                            </div>
                          </div>
                          <div data-groupid="item.planId" className={styles.gp_deatil_right}>
                            <div className={styles.gdr_text}>
                              <span >收起</span>
                              <i className={styles.rotate}></i>
                            </div>
                          </div>
                          <div className={styles.plan_pro_group_detail}>
                            <div className={styles.project_stu_progress}>
                              <div className={styles.p_i_top}>
                                <div className={styles.p_i_title}>示例项目</div>
                                <div className={styles.project_time_detail}>
                                  <span >任务 0 个</span>
                                  <span >|</span>
                                  <span > 时长 48 天</span>
                                </div>
                                <div className={styles.p_i_date}>
                                  <span style={{ marginRight: '10px' }}>2021-05-14 00:00:00</span>
                                  <span >~</span>
                                  <span style={{ marginLeft: '10px' }}>2021-06-30 00:00:00</span>
                                </div>
                              </div>
                              <div className={styles.pro_progress}>
                                <div role="progressbar" className={styles.el_progress}>
                                  <div className={styles.el_progress_bar}>
                                    <div className={styles.el_progress_bar__outer} style={{ height: ' 6px' }}>
                                      <div className={styles.el_progress_bar__inner} style={{ width: '16%', backgroundColor: 'rgb(255, 168, 65)' }}>
                                        {/* <!----> */}
                                      </div>
                                    </div>
                                  </div>
                                  <div className={styles.el_progress__text} style={{ fontSize: '14.4px' }}>16%</div>
                                </div>
                              </div>
                              <div className={styles.g_p_detail}>
                                <div className={styles.gp_deatil_left}>
                                  <div className={styles.gpdl_img}>
                                    <img src="/static/img/person.358ba865.svg" alt="" />
                                  </div>
                                  <div className={styles.gpdl_text}>
                                    <span >人员</span>
                                    <span >10</span>
                                  </div>
                                  <div className={styles.gpdl_img}>
                                    <img src="/static/img/complete.ac9f6b54.svg" alt="" />
                                  </div>
                                  <div className={styles.gpdl_text}>
                                    <span >按期完成</span>
                                    <span >0</span>
                                  </div>
                                  <div className={styles.gpdl_img}>
                                    <img src="/static/img/nocomplete.3f20402c.svg" alt="" />
                                  </div>
                                  <div className={styles.gpdl_text}>
                                    <span >延期未完成</span>
                                    <span >10</span>
                                  </div>
                                </div>
                              </div>
                              <div className={styles.showprogress}>
                                <div className={styles.plan_group_table}>
                                  <div className={styles.el_table} style={{ width: '100%' }}>
                                    <div className={styles.hidden_columns}>
                                      <div >
                                        <div ></div>
                                        <div ></div>
                                      </div>
                                    </div>
                                    <div className={styles.el_table__header_wrapper}>
                                      <table className={styles.el_table__header} style={{ width: '796px' }}>
                                        <colgroup>
                                          <col  width="100" />
                                          <col  width="696" />
                                          <col  width="0" />
                                        </colgroup>
                                        <thead className={styles.has_gutter}>
                                          <tr className="">
                                            <th className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>
                                                <div className={styles.table_header}>
                                                  <div style={{ textAlign: 'center', width: ' 100%' }}>姓名</div>
                                                  {/* <!----> */}
                                                </div>
                                              </div>
                                            </th>
                                            <th className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}>
                                                <div className={styles.table_header}>
                                                  <div >示例项目</div>
                                                  <div className={styles.tab_header_days}> 时长：48 天 </div>
                                                </div>
                                              </div>
                                            </th>
                                            <th className={styles.gutter} style={{ width: '0px', display: 'none' }}></th>
                                          </tr>
                                        </thead>
                                      </table>
                                    </div>
                                    <div className={styles.el_table__body_wrapper}>
                                      <table className={styles.el_table__body} style={{ width: '796px' }}>
                                        <colgroup>
                                          <col  width="100" />
                                          <col width="696" />
                                        </colgroup>
                                        <tbody>
                                          <tr className={styles.el_table__row}>
                                            <td className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>胡同学</div>
                                            </td>
                                            <td className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}></div>
                                            </td>
                                          </tr>
                                          <tr className={styles.el_table__row}>
                                            <td className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>王冠</div>
                                            </td>
                                            <td className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}></div>
                                            </td>
                                          </tr>
                                          <tr className={styles.el_table__row}>
                                            <td className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>杨明辉</div>
                                            </td>
                                            <td className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}></div>
                                            </td>
                                          </tr>
                                          <tr className={styles.el_table__row}>
                                            <td className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>黄琼</div>
                                            </td>
                                            <td className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}></div>
                                            </td>
                                          </tr>
                                          <tr className={styles.el_table__row}>
                                            <td className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>徐锦阳</div>
                                            </td>
                                            <td className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}></div>
                                            </td>
                                          </tr>
                                          <tr className={styles.el_table__row}>
                                            <td className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>赵同学</div>
                                            </td>
                                            <td className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}></div>
                                            </td>
                                          </tr>
                                          <tr className={styles.el_table__row}>
                                            <td className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>古昌军</div>
                                            </td>
                                            <td className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}></div>
                                            </td>
                                          </tr>
                                          <tr className={styles.el_table__row}>
                                            <td className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>黄辉</div>
                                            </td>
                                            <td className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}></div>
                                            </td>
                                          </tr>
                                          <tr className={styles.el_table__row}>
                                            <td className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>高健要</div>
                                            </td>
                                            <td className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}></div>
                                            </td>
                                          </tr>
                                          <tr className={styles.el_table__row}>
                                            <td className={styles.el_table_2_column_4}>
                                              <div className={styles.cell}>牛莉</div>
                                            </td>
                                            <td className={styles.el_table_2_column_3}>
                                              <div className={styles.cell}></div>
                                            </td>
                                          </tr>
                                         
                                        </tbody>
                                      </table>
                                      
                                    </div>
                                   
                                    <div className={styles.el_table__fixed} style={{ width: '100px', height: ' 466px' }}>
                                      <div className={styles.el_table__fixed_header_wrapper}>
                                        <table className={styles.el_table__header} style={{ width: '796px' }}>
                                          <colgroup>
                                            <col width="100" />
                                            <col width="696" />
                                          </colgroup>
                                          <thead className="">
                                            <tr className="">
                                              <th className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>
                                                  <div className={styles.table_header}>
                                                    <div style={{ textAlign: 'center', width: '100%' }}>姓名</div>
                                                    {/* <!----> */}
                                                  </div>
                                                </div>
                                              </th>
                                              <th className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}>
                                                  <div className={styles.table_header}>
                                                    <div >示例项目</div>
                                                    <div className={styles.tab_header_days}> 时长：48 天 </div>
                                                  </div>
                                                </div>
                                              </th>
                                            </tr>
                                          </thead>
                                        </table>
                                      </div>
                                      <div className={styles.el_table__fixed_body_wrapper} style={{ top: '42px' }}>
                                        <table className={styles.el_table__body} style={{ width: '796px' }} >
                                          <colgroup>
                                            <col width="100" />
                                            <col width="696" />
                                          </colgroup>
                                          <tbody>
                                            <tr className={styles.el_table__row}>
                                              <td className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>胡同学</div>
                                              </td>
                                              <td className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}></div>
                                              </td>
                                            </tr>
                                            <tr className={styles.el_table__row}>
                                              <td className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>王冠</div>
                                              </td>
                                              <td className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}></div>
                                              </td>
                                            </tr>
                                            <tr className={styles.el_table__row}>
                                              <td className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>杨明辉</div>
                                              </td>
                                              <td className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}></div>
                                              </td>
                                            </tr>
                                            <tr className={styles.el_table__row}>
                                              <td className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>黄琼</div>
                                              </td>
                                              <td className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}></div>
                                              </td>
                                            </tr>
                                            <tr className={styles.el_table__row}>
                                              <td className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>徐锦阳</div>
                                              </td>
                                              <td className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}></div>
                                              </td>
                                            </tr>
                                            <tr className={styles.el_table__row}>
                                              <td className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>赵同学</div>
                                              </td>
                                              <td className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}></div>
                                              </td>
                                            </tr>
                                            <tr className={styles.el_table__row}>
                                              <td className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>古昌军</div>
                                              </td>
                                              <td className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}></div>
                                              </td>
                                            </tr>
                                            <tr className={styles.el_table__row}>
                                              <td className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>黄辉</div>
                                              </td>
                                              <td className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}></div>
                                              </td>
                                            </tr>
                                            <tr className={styles.el_table__row}>
                                              <td className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>高健要</div>
                                              </td>
                                              <td className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}></div>
                                              </td>
                                            </tr>
                                            <tr className={styles.el_table__row}>
                                              <td className={styles.el_table_2_column_4}>
                                                <div className={styles.cell}>牛莉</div>
                                              </td>
                                              <td className={styles.el_table_2_column_3}>
                                                <div className={styles.cell}></div>
                                              </td>
                                            </tr>
                                            
                                          </tbody>
                                        </table>
                                        
                                      </div>
                                      
                                    </div>
                                     
                                    <div className={styles.el_table} style={{ display: 'none' }}></div>
                                  </div>
                                </div>
                              </div>
                              <div className={styles.plan}>
                                <div className={styles.plan}>我的任务</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className={styles.pagination}>
                        <div className={styles.el_pagination}>
                          <ul className={styles.el_pager}>
                            <li className={styles.number}>1</li>
                            
                          </ul>
                          <button type="button" className={styles.btn_next}>
                            <i className={styles.el_icon}></i>
                          </button>
                          <span className={styles.el_pagination__jump}>
                            前往
                            <div className={styles.el_input}>
                              {/* <!----> */}
                              <input type="number" min="1" max="1" className={styles.el_input__inner} />
                             
                            </div>
                            页
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div role="tabpanel" aria-hidden="true" id="pane-third" aria-labelledby="tab-third" className={styles.el_tab_pane} style={{ display: 'none' }}></div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.project_right}>
            <div className={styles.good_class}>
              <div className={styles.n_d_title}>
                <div className={styles.el_col} style={{ display: 'flex' }}>
                  <span className={styles.icon}></span>
                  <div className={styles.item}>相关实训</div>
                </div>
              </div>
              <div>
                {


                  myProject.rightList.map(item => {
                    console.log(myProject.rightList)
                    console.log(item);

                    return <div className={styles.class_deatil}>
                      <div>
                        <div className={styles.class_img}>
                          <img src='http://111.203.59.61:8060/file_service/group1/M00/00/18/rBsCHWChvUqAP7FxAAFIkt-y4LM83.jpeg' alt="" />
                        </div>
                        <div className={styles.class_right}>
                          <div className={styles.class_direction}>{item.name}</div>
                          <div className={styles.class_icon}>
                            <div className={styles.flex_center}>
                              <img src="" alt="" />
                              <span>{item.stuCount}</span>
                            </div>
                            <div className={styles.flex_center}>
                              <img src="" alt="" />
                              <span>{item.favorCount}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  })
                }
              </div>
            </div>
          </div>
        </div >
      </div>
    </div>
  </div>

}

export default observer(MyProject)